<script type="text/javascript" language="javascript" src="ajax/jquery.dataTables.min.js"></script>
<script language="Javascript" SRC="ajax/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="css/demo_page.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/demo_table.css" type="text/css" media="all" />
{literal}
<style type="text/css">
.dataTables_filter {
display: none;
}
</style> 
<script language="Javascript">
    
        var oCache = {
                iCacheLower: -1
        };

        function fnSetKey( aoData, sKey, mValue )
        {
                for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
                {
                        if ( aoData[i].name == sKey )
                        {
                                aoData[i].value = mValue;
                        }
                }
        }

        function fnGetKey( aoData, sKey )
        {
                for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
                {
                        if ( aoData[i].name == sKey )
                        {
                                return aoData[i].value;
                        }
                }
                return null;
        }

        function fnDataTablesPipeline ( sSource, aoData, fnCallback ) {
                var iPipe = 5; /* Ajust the pipe size */

                var bNeedServer = false;
                var sEcho = fnGetKey(aoData, "sEcho");
                var iRequestStart = fnGetKey(aoData, "iDisplayStart");
                var iRequestLength = fnGetKey(aoData, "iDisplayLength");
                var iRequestEnd = iRequestStart + iRequestLength;
                oCache.iDisplayStart = iRequestStart;

                /* outside pipeline? */
                if ( oCache.iCacheLower < 0 || iRequestStart < oCache.iCacheLower || iRequestEnd > oCache.iCacheUpper )
                {
                        bNeedServer = true;
                }

                /* sorting etc changed? */
                if ( oCache.lastRequest && !bNeedServer )
                {
                        for( var i=0, iLen=aoData.length ; i<iLen ; i++ )
                        {
                                if ( aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho" )
                                {
                                        if ( aoData[i].value != oCache.lastRequest[i].value )
                                        {
                                                bNeedServer = true;
                                                break;
                                        }
                                }
                        }
                }

                /* Store the request for checking next time around */
                oCache.lastRequest = aoData.slice();

                if ( bNeedServer )
                {
                        if ( iRequestStart < oCache.iCacheLower )
                        {
                                iRequestStart = iRequestStart - (iRequestLength*(iPipe-1));
                                if ( iRequestStart < 0 )
                                {
                                        iRequestStart = 0;
                                }
                        }

                        oCache.iCacheLower = iRequestStart;
                        oCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe);
                        oCache.iDisplayLength = fnGetKey( aoData, "iDisplayLength" );
                        fnSetKey( aoData, "iDisplayStart", iRequestStart );
                        fnSetKey( aoData, "iDisplayLength", iRequestLength*iPipe );

                        $.getJSON( sSource, aoData, function (json) {
                                /* Callback processing */
                                oCache.lastJson = jQuery.extend(true, {}, json);

                                if ( oCache.iCacheLower != oCache.iDisplayStart )
                                {
                                        json.aaData.splice( 0, oCache.iDisplayStart-oCache.iCacheLower );
                                }
                                json.aaData.splice( oCache.iDisplayLength, json.aaData.length );

                                fnCallback(json)
                        } );
                }
                else
                {
                        json = jQuery.extend(true, {}, oCache.lastJson);
                        json.sEcho = sEcho; /* Update the echo for each response */
                        json.aaData.splice( 0, iRequestStart-oCache.iCacheLower );
                        json.aaData.splice( iRequestLength, json.aaData.length );
                        fnCallback(json);
                        return;
                }
        }

        $(document).ready(function() {
                oTable=$('#example').dataTable( {
                        "bProcessing": true,
                        "bServerSide": true,
                        "sAjaxSource": "index.php?site=mailing&action=showClientGrid",
                        "fnServerData": fnDataTablesPipeline,
                        "bFilter": true,
                        "bInfo": false,
						"aLengthMenu": [[10, 25, 50, 100,150,500,1000], [10, 25, 50, 100,150,500,1000]],
                                                "sPaginationType": "full_numbers",
                         "oLanguage": {
                        "sLengthMenu": "Wyswietl _MENU_ wpisów na stronę",
                        "sZeroRecords": "Nic nie znaleziono",
                        "sInfo": "Pokazuje od _START_ do _END_ z _TOTAL_ wpisów",
                        "sInfoEmpty": "Pokazuje od 0 do 0 z 0 wpisów",
                        "sInfoFiltered": "(Wybrano z _MAX_ wpisów)"
                        },
                        "aoColumns": [
        { "sName": "client_id" },
        { "sName": "client_categories_id" },
        { "sName": "client_organization_id" },
        { "sName": "name" },
        { "sName": "surname" },
        { "sName": "gender" },
        { "sName": "age" },
        { "sName": "email" },
        { "sName": "status" },
        { "sName": "allowed_binary_code" },
        { "sName": "test" }],			
                                                "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                        if ( aData[5] == "1" )
                        {
                                $('td:eq(5)', nRow).html( 'Kobieta' );
                        }
                        if ( aData[5] == "0" )
                        {
                                $('td:eq(5)', nRow).html( 'Mężczyzna' );
                        }
                        $('input.target', nRow).click(function(){
                          $.post("index.php", {site: "mailing", action: "updateTarget",Target: this.id } );
						  callForSite('mailing','targetNum','getTargetNum');
                        });
                        return nRow;
                }
                } );
                $("#name_filter").keyup( function () {
                oTable.fnFilter( this.value);
                } );
                $("#surname_filter").keyup( function () {
                oTable.fnFilter( this.value, 1);
                } );
                $("#ageDown_filter").keyup( function () {
                oTable.fnFilter( this.value,2);
                } );
                $("#ageUp_filter").keyup( function () {
                oTable.fnFilter( this.value, 3);
                } );
                $("#gender_filter").change( function () {
                oTable.fnFilter( this.value, 4);
                } );
				$("button.nextStep").click(function(){
				callForSite("mailing","main","createQue3");
				});
				$("input.checkAll").click(function(){
				$("input.target").trigger('click');
					$("input.target").prop("checked", true);
				});

        } );
        {/literal}
</script>
<button class='nextStep'>Dalej</button><input type='checkbox' class='checkAll'>Wszystkie</input>
<div id='targetNum'>0</div>
<div id="container">
    <table cellpadding="0" cellspacing="0" border="0" class="display">
        <tbody>
            <tr >
                <td align="center">Imię</td>
                <td align="center"><input type="text"     name="name_filter" id="name_filter"></td>
                <td align="center"><input type="checkbox" name="name_regex"  id="name_regex" ></td>
            </tr>
            <tr >
                <td align="center">Nazwisko</td>
                <td align="center"><input type="text"     name="surname_filter" id="surname_filter"></td>
                <td align="center"><input type="checkbox" name="surnname_regex"  id="surnname_regex" ></td>
            </tr>
            <tr >
                <td align="center">Wiek od</td>
                <td align="center"><input type="text"     name="global_filter" id="ageDown_filter"></td>
            </tr>
            <tr >
                <td align="center">Wiek od</td>
                <td align="center"><input type="text"     name="global_filter" id="ageUp_filter"></td>
            </tr>
            <tr >
                <td align="center">Płeć</td>
                <td align="center">
                    <select id="gender_filter" name="gender_filter">
						<option value="">Dowolna</option>
                        <option value="2">Mężczyzna</option>
                        <option value="1">Kobieta</option>
                    </select>
                </td>
            </tr>

        </tbody>
    </table>
	
    <div id="dynamic">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th width="20%">ID</th>
                    <th width="25%">Kategoria</th>
                    <th width="25%">Org</th>
                    <th width="15%">Imie</th>
                    <th width="15%">Nazwisko</th>
                    <th width="15%">Pleć</th>
                    <th width="15%">Wiek</th>
                    <th width="15%">email</th>
                    <th width="15%">Status</th>
                    <th width="15%">Typy</th>
                    <th width="15%">Zaznaczenie</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5" class="dataTables_empty">Loading data from server</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="spacer"></div>
</div>
